import { Tabs, Switch, Tooltip, Icon } from 'antd';
import { Panel } from 'comps/common';
import SettingsForm from '../containers/unit-config-forms/settings';
import MachinesForm from '../containers/unit-config-forms/machines';
import BuildForm from '../containers/unit-config-forms/build';
import PropertiesForm from '../containers/unit-config-forms/properties';

const TabPane = Tabs.TabPane;

const UnitConfig = ({ title, typeUpdateFetching, unit, onTypeChange }) => {
  const canPackage = unit.type !== 'DOCKER_IMAGE';
  const canDeploy = unit.type !== 'MAVEN_PARENT';

  const panes = [(
    <TabPane tab='基本信息' key='settings'>
      <SettingsForm unit={unit}/>
    </TabPane>
  )];
  if (canDeploy) {
    panes.push(
      <TabPane tab='机器分配' key='machines'>
        <MachinesForm unit={unit}/>
      </TabPane>
    );
  }
  if (canPackage) {
    panes.push(
      <TabPane tab='打包配置' key='build'>
        <BuildForm unit={unit} canDeploy={canDeploy}/>
      </TabPane>
    );
  }
  if (canDeploy) {
    panes.push(
      <TabPane tab='部署配置' key='deploy'>
        <PropertiesForm unit={unit}/>
      </TabPane>
    );
  }

  const onMavenParentTypeSwitch = (checked) => {
    onTypeChange(checked ? 'MAVEN' : 'MAVEN_PARENT');
  };

  return (
    <Panel title={`运行单元配置：${title}`} className='runnable-unit-config' spinner={typeUpdateFetching}>
      {unit.type === 'MAVEN' || unit.type === 'MAVEN_PARENT'
        ? (<span>
            <Switch checked={unit.type === 'MAVEN'} checkedChildren='是' unCheckedChildren='否' onChange={onMavenParentTypeSwitch}/>
        &nbsp;
        <Tooltip title='很多时候我们的 MAVEN 父工程只是一个 POM ，是不可单独部署的'>
          <span>是否为可部署的 MAVEN 父工程 <Icon type='question-circle'/></span>
        </Tooltip>
          </span>)
        : undefined
      }
      <Tabs size='small'>
        {panes}
      </Tabs>
    </Panel>
  );
};

export default UnitConfig;
